<script setup>
import {ref, onMounted, inject, nextTick} from "vue";

const Echarts = inject('$echarts');
import container from "../../components/container.vue";

const myChart = ref(null);
const myChart1 = ref(null);
const myChart2 = ref(null);
const myChart3 = ref(null);

onMounted(() => {

})
nextTick(() => {
  render(myChart)
  render(myChart1)
  render(myChart2)
  render(myChart3)
})
const render = (dom) => {

  const {clientHeight, clientWidth} = dom.value;
  console.log(clientWidth, clientHeight)
  const ssechart = Echarts.init(dom.value, null, {
    width: clientWidth + 'px',
    height: clientHeight + 'px'
  });
  window.addEventListener('resize', function () {
    ssechart.resize();
  });
  ssechart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10]
    }]
  });

};

</script>

<template>
  <container :displayNavigation="true">
    <div class="cont">
      <a-space direction="vertical" :size="16" style="display: block;">
        <a-row class="grid-demo">
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xxl="6" :span="6">
            <div ref="myChart" class="tttt"></div>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xxl="6" :span="6">
            <div ref="myChart1" class="tttt"></div>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xxl="6" :span="6">
            <div ref="myChart2" class="tttt"></div>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xxl="6" :span="6">
            <div ref="myChart3" class="tttt"></div>
          </a-col>
        </a-row>
      </a-space>
    </div>
  </container>
</template>

<style scoped lang="scss">
.cont {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1)
}

.tttt {
  width: 100%;
  height: 200px;
}

</style>